<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
</head>
<body>
    
</body>
<!-- 
    为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术
    （也称 CSS Sprites、CSS 雪碧）。
    核心原理：
    将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。
    
    使用精灵图核心：

    精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
    这个大图片也称为 sprites 精灵图 或者 雪碧图
    移动背景图片位置， 此时可以使用 background-position 。
    移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
    因为一般情况下都是往上往左移动，所以数值是负值。
    使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

    精灵图主要针对于小的背景图片使用。

    主要借助于背景位置来实现—background-position 。
    
    一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
 -->
</html>